<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">忘记密码</text>
		</uni-nav-bar>
		<view class="body flex-c bottom-ios">
			<view class="box mt20">
				<view class="input-box flex-r ac">
					<input class="input text-regular" name="phone" type="number" placeholder="请输入手机号" placeholder-style="color:#B3B3B3;" v-model="phone" @input="inputPhone" :maxlength="11"/>
					<uni-icons class="clear-icon" v-show="phone != ''" type="clear" color="#B3B3B3" size="36rpx" @tap="phone = ''"></uni-icons>
				</view>
				<view class="input-box border flex-r ac">
					<input class="input text-regular" name="smscode" type="number" placeholder="请输入验证码" placeholder-style="color:#B3B3B3;" v-model="smscode" :focus="codefocus" :maxlength="6"/>
					<text class="text-regular color-blue" @tap="sendSMS">{{sendText}}</text>
				</view>
			</view>
			<view class="box mt20">
				<view class="input-box flex-r ac">
					<input class="input text-regular" name="newpwd" type="password" placeholder="请输入新密码" placeholder-style="color:#B3B3B3;" v-model="newpwd" />
					<uni-icons class="clear-icon" v-show="newpwd != ''" type="clear" color="#B3B3B3" size="36rpx" @tap="newpwd = ''"></uni-icons>
				</view>
			</view>
			<view class="submit-box">
				<button type="default" :class="{'active': canSubmit}" @tap="submitReset" :loading="loading">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import imMsg from "@/utils/common/message.js";
	export default {
		data() {
			return {
				phone: '', //手机号
				smscode: '', //验证码
				newpwd: '', //新密码
				
				codefocus: false, //验证码输入框聚焦
				isSend: false, //验证码发送状态
				isSubmit: false, //是否已经提交
				loading: false, //加载状态
				
				sendText: '获取验证码', //发送验证码提示文字
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			canSend() {
				return this.phone != '' && this.phone.length == 11 && /^[1][3-9][\d]{9}/.test(this.phone)
			},
			canSubmit() {
				return this.canSend && this.smscode != '' && this.smscode.length == 6 && this.newpwd != '' && this.newpwd.length > 7
			}
		},
		onLoad() {
			this.phone = uni.getStorageSync('user_phone') || ''
		},
		methods: {
			//发送短信验证码
			sendSMS() {
				if(this.isSend){ //防止重复发送
					return
				}
				if(!this.canSend){ //确认是否输入正确的手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return
				}
				this.isSend = true
				this.sendText = '发送中...'
				this.$CHS.sendSmsCode({
					phone: this.phone,
					term: 'user',
					type: 2 //0 .登录模板、1.注册模板、2.忘记密码模板
				}).then((res)=>{
					let time = 60
					this.sendText = '重新获取 ' + time + 's'
					this.timer = setInterval(()=>{
						time = time - 1
						if(time === 0){
							clearInterval(this.timer)
							this.isSend = false
							this.timer = null
							this.sendText = '获取验证码'
						}else{
							this.sendText = '重新获取 ' + time + 's'
						}
					}, 1000)
					this.codefocus = true
				}).catch((err)=>{
					this.isSend = false
					this.sendText = '获取验证码'
				})
			},
			//提交重置密码
			submitReset(){
				if(this.isSubmit || !this.canSubmit) {
					return
				}
				if(this.newpwd != '' && !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\.\#\@\&\_\-\$\%\*]{8,}$/.test(this.newpwd)){
					uni.showToast({
						title: '请输入至少8位由数字、大小写字母和特殊符号组成的密码',
						icon: 'none'
					});
					return
				}
				this.isSubmit = true
				this.loading  = true
				
				this.$http.post({
					url: '/api/forgetPwd',
					data:{
						smscode: this.smscode,
						password: this.newpwd,
						username: this.phone,
						term: 'user'
					}
				}).then((data)=>{
					console.log(data);
					if(data.success && data.code == 200){
						this.$ShowToast({text: '密码重置成功'})
						setTimeout(()=>{
							this.isSubmit = false
							this.$Router.replace({name: 'passwordlogin'})
						}, 500)
					}else{
						this.isSubmit = false
						if(data.code == 10077 || data.code == 10006 ){
							uni.showModal({
								title: '系统提示',
								content: '当前手机号已注销，请更换手机号或重新申请注册',
								confirmText: '重新注册',
								cancelText: '更换手机号',
								success: (res) => {
									if (res.confirm) {
										this.$Router.push({name: 'resetlogin', params: {phone: this.phone}})
									} else {
										this.smscode = ''
										this.phone = ''
										this.newpwd = ''
									}
								}
							})
						}else{
							uni.showModal({
								title: '系统提示',
								content: data.message,
								showCancel: false,
							})
						}
					}
					this.loading = false
				}).catch((err)=>{
					console.log(err);
					this.isSubmit = false
					this.loading = false
					//失败提示
					uni.showToast({
						title: '密码重置失败，请稍后重试',
						icon: 'none'
					})
				})
			},
			//输入手机号
			inputPhone(e) {
				if(e.detail.value && e.detail.value.length == 11){
					if(/^[1][3-9][\d]{9}/.test(e.detail.value)){
						this.codefocus = true
					}else{
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 0;
		.body{
			.input-box{
				background: #FFFFFF;
				padding: 0 20rpx;
				.input{
					flex: 2;
					border: none;
					height: 96rpx;
				}
				.clear-icon{
					width: 60rpx;
					height: 96rpx;
					line-height: 96rpx;
				}
				&.border{
					border-top: 1rpx solid #ededed;
				}
			}
			.submit-box{
				margin: 40rpx 20rpx;
			}
		}
	}
</style>
